<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>jQueryTree by YinHang</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link href="css/jQueryTree-1.2.1.css" rel="stylesheet" type="text/css" />
		<link href="css/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
		<link href="css/ex9/ex9.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="javascript/core/jquery-1.4.3.pack.js"></script>
		<script type="text/javascript" src="javascript/core/jquery-ui-1.8.13.custom.min.js"></script>
		<script type="text/javascript" src="javascript/system/jQueryTree-1.2.1.min.js"></script>
		<script type="text/javascript">
			var newData = {
					id: 1,
					content: "新数据"
				};
			//
			var treeEx1, treeEx2, treeEx3, treeEx4, treeEx5, treeEx6, treeEx7, treeEx8, treeEx9;
			
			//创建一颗单选树
			function createSingleTree(parent) {
				$.ajax({
					url: "data/tree.json",
					dataType: "json",
					success: function (data) {
						treeEx1 = new $.Tree({
							parent: parent,
							source: data,
							selectMode: "single"
						});
					}
				});
			};
			
			//创建一颗多选树
			function createMulSelTree(parent) {
				$.ajax({
					url: "data/tree.json",
					dataType: "json",
					success: function (data) {
						treeEx2 = new $.Tree({
							parent: parent,
							source: data,
							selectMode: "checkbox"
						});
					}
				});
			};
			
			//创建一棵单选多选混合树
			function createSMTree(parent) {
				$.ajax({
					url: "data/tree.json",
					dataType: "json",
					success: function (data) {
						treeEx3 = new $.Tree({
							parent: parent,
							source: data,
							selectMode: "checkbox&single"
						});
					}
				});
			};
			
			//创建一棵节点数据预处理树
			function createPeredTree(parent) {
				$.ajax({
					url: "data/tree.json",
					dataType: "json",
					success: function (data) {
						treeEx4 = new $.Tree({
							parent: parent,
							source: data,
							selectMode: "checkbox&single",
							pretreatment: function (node) {
								//因为这里传来的是一个数据对象引用，为了不破坏原有对象所以返回一个新对象，如果没有return，则默认用原始数据.
								return {
									id: "dataId" + node.id,	//把"id"转换为"dataId_id"
									content: "<span class='tree-content'>-- " + node.content + " --</span>",	//给内容外边加上一个span
									children: node.children
								};
							}
						});
					}
				});
			};
			
			//创建一棵元数据附着树
			function createJsonQuoteTree(parent) {
				$.ajax({
					url: "data/tree.json",
					dataType: "json",
					success: function (data) {
						treeEx5 = new $.Tree({
							parent: parent,
							source: data,
							selectMode: "single",
							sourceQuote: true,	//设置将元数据附着在节点上
							pretreatment: function (node) {
								return {
									id: node.id,
									content: "<span class='tree-content'>-- " + node.content + " -- 点击查看原始json数据</span>",	//给内容外边加上一个span
									children: node.children
								};
							}, 
							onSelect: function (node) {	//当节点选择的时候调用的函数，会把节点内容当做参数传入。
								var source = $(node).data("source");	//这里必须用jquery取到。取得名称为'source'的数据.
								alert(source.id + " - " + source.content);
							}
						});
					}
				});
			};
			
			//创建一棵异步加载树
			function createAsyncTree(parent) {
				$.ajax({
					url: "data/tree.json",
					dataType: "json",
					success: function (data) {
						treeEx6 = new $.Tree({
							parent: parent,
							source: data,
							selectMode: "single",
							pretreatment: function (node) {
								node.content = node.remoteChildren ? ( node.content + "<font color='#ACA899'>" + "(远程获取子节点)" + "</font>" ) : node.content;
								return node;
							},
							remoteChildren: {	//默认远程加载设置(除paramTemplate项外，其他与jquery的$.ajax内选项一致)
								paramTemplate: "version=#1.2&id=id",	//请求的参数模板,字面量前面加"#",如:id=#128.会被替换为id=128.还可以获取本节点的数据作为参数,例如id=id,这时不需要加"#",id会被替换为节点的id属性的值例如id=2.
								url: "data/node.json"
							}
						});
					}
				});
			};
			
			//创建一棵拖动排序树
			function createDragToSortTree(parent) {
				$.ajax({
					url: "data/tree.json",
					dataType: "json",
					success: function (data) {
						treeEx7 = new $.Tree({
							parent: parent,
							source: data,
							selectMode: "single",
							sortable: true,	//设置为可拖动排序的,需要jquery-ui-sortable支持.
							sortover: function (nodeContent, prevNodeContent) {
								
							}
						});
					}
				});
			};
			
			//创建一棵带节点事件的树(必须设置selectMode为"single")
			function createEventBindedTree(parent) {
				$.ajax({
					url: "data/tree.json",
					dataType: "json",
					success: function (data) {
						treeEx8 = new $.Tree({
							parent: parent,
							source: data,
							selectMode: "single",
							sourceQuote: true,
							nodeEvents: {
								"click": function (event, node) {
									alert($(node).data("source"));
								}
							}
						});
					}
				});
			};
			
			//创建一棵设置了节点事件触发句柄的树
			function createHasEventHandleTree(parent) {
				$.ajax({
					url: "data/ex9/tree.json",
					dataType: "json",
					success: function (data) {
						treeEx9 = new $.Tree({
							parent: parent,
							source: data,
							selectMode: "single",
							sourceQuote: true,
							eventTrigger: "span.content",	//设置事件触发句柄，这是一个选择器表达式。
							pretreatment: function (nodeData) {
								//作为示例，这里给每个节点加上图标，为了不让图标被选中，需要用到eventTrigger属性.
								var classes = ["tree-ico"];
								switch(nodeData.type)
								{
									case "pic":
										classes.push("tree-ico-pic");
										break;
									case "car":
										classes.push("tree-ico-car");
										break;
									case "channel":
										classes.push("tree-ico-channel");
										break;
									case "url":
										classes.push("tree-ico-url");
										break;
									case "account":
										classes.push("tree-ico-account");
										break;
									case "movie":
										classes.push("tree-ico-movie");
										break;
									case "cellphone":
										classes.push("tree-ico-cellphone");
										break;
									case "email":
										classes.push("tree-ico-email");
										break;
									default:
										classes = [];
								}
								nodeData.content = "<span class='" + classes.join(" ") + "'></span><span class='content'>" + nodeData.content + "</span>"
							},
							nodeEvents: {	//添加一个事件监听器
								"dblclick": function (event, node) {
									alert($(node).data("source"));
								}
							}
						});
					}
				});
			};
			
			//所有树从这里开始生成
			$(function () {		
				createSingleTree($("#treeEx1"));
				createMulSelTree($("#treeEx2"));
				createSMTree($("#treeEx3"));
				createPeredTree($("#treeEx4"));
				createJsonQuoteTree($("#treeEx5"));
				createAsyncTree($("#treeEx6"));
				createDragToSortTree($("#treeEx7"));
				createEventBindedTree($("#treeEx8"));
				createHasEventHandleTree($("#treeEx9"));
			});
		</script>
		<style type="text/css">
			h1 {
				font-size: 14px;
				border-bottom: 2px solid #000000;
			}
			
			body {
				margin: 0;
				padding: 4px;
				cursor: default;
				font-size: 12px;
			}
			
			#testTree {
				position: relative;
			}
			
			pre {
				border: 1px solid #cccccc;
				padding-top: 32px;
				background-color: #FFFFF0;
			}
			
			button {
				margin-top: 4px;
				margin-bottom: 4px;
				font-size: 12px;
				border: 1px solid #cccccc;
				background-color: #D1EEEE;
				cursor: pointer;
				margin-right: 4px;
			}
			
			button.highlight {
				border: 1px solid #ff0000;
				font-weight: bold;
			}
			
			.demo {
				margin-top: 8px;
			}
			
			.tree-content {
				color: #ff0000;
				font-style: oblique;
				font-size: 16px;
			}
			
			.all {
				border-top: 2px solid #ff0000;
				border-bottom: 2px solid #ff0000;
			}
		</style>
	</head>
	<body>
		<div class="demo all">
			<h1>文件包含</h1>
			<pre>
				需要包含以下样式，脚本:
				
				&lt;link href="css/jQueryTree-1.2.1.css" rel="stylesheet" type="text/css" /&gt;
				
				&lt;script type="text/javascript" src="javascript/core/jquery-1.4.3.pack.js"&gt;&lt;/script&gt;
				
				&lt;script type="text/javascript" src="javascript/system/jQueryTree-1.2.1.min.js"&gt;&lt;/script&gt;
				
				然后:
				需要的图片文件在这个路径:
				/image/tree
				
				好的，文件引用没有问题的话，你可以看下边的教程了!
				
				(需要拖拽排序功能，请自行引入jQuery-ui-sortable这个模块的文件以及相关样式，素材。)
			</pre>
		</div>
		<div class="demo">
			<h1>1.创建一颗单选树</h1>
			<pre>
				treeEx1 = new $.Tree({
						parent: parent,	//父节点
						source: treeData,	//树结构数据
						selectMode: "single"	//选择模式
					});
			</pre>
			<div>
				<button onclick="treeEx1.insert(newData);">插入新节点</button>
				<button onclick="treeEx1.append(newData);">添加新节点</button>
				<button onclick="treeEx1.appendChild(newData);">追加子节点</button>
				<button onclick="treeEx1.insertChild(newData);">插入子节点</button>
				<button onclick="treeEx1.appendToRoot(newData);">追加祖先节点</button>
				<button onclick="treeEx1.insertToRoot(newData);">插入祖先节点</button>
				<button onclick="treeEx1.moveUp();">节点上移</button>
				<button onclick="treeEx1.moveDown();">节点下移</button>
				<button onclick="treeEx1.del();">删除节点</button>
			</div>
			<div id="treeEx1" class="tree-ex">
				加载中...
			</div>
		</div>
		<div class="demo">
			<h1>2.创建一颗带多选框的树</h1>
			<pre>
				treeEx2 = new $.Tree({
						parent: parent,	//父节点
						source: treeData,	//树结构数据
						selectMode: "checkbox"	//选择模式
					});
			</pre>
			<div>
				<button onclick="alert(treeEx2.getSelectedList() + ';\ncount: ' + treeEx3.getSelectedList().length);">取得选中列表</button>
			</div>
			<div id="treeEx2" class="tree-ex">
				加载中...
			</div>
		</div>
		<div class="demo">
			<h1>3.创建一颗带多选框&单选的复合树</h1>
			<pre>
				treeEx3 = new $.Tree({
						parent: parent,	//父节点
						source: treeData,	//树结构数据
						selectMode: "checkbox&single"	//选择模式
					});
			</pre>
			<div>
				<button onclick="treeEx3.insert(newData);">插入新节点</button>
				<button onclick="treeEx3.append(newData);">添加新节点</button>
				<button onclick="treeEx3.appendChild(newData);">追加子节点</button>
				<button onclick="treeEx3.insertChild(newData);">插入子节点</button>
				<button onclick="treeEx3.appendToRoot(newData);">追加祖先节点</button>
				<button onclick="treeEx3.insertToRoot(newData);">插入祖先节点</button>
				<button onclick="treeEx3.moveUp();">节点上移</button>
				<button onclick="treeEx3.moveDown();">节点下移</button>
				<button onclick="treeEx3.del();">删除节点</button>
				<button onclick="alert(treeEx3.getSelectedList() + ';\ncount: ' + treeEx3.getSelectedList().length);">取得选中列表</button>
			</div>
			<div id="treeEx3" class="tree-ex">
				加载中...
			</div>
		</div>
		<div class="demo">
			<h1>4.节点生成前数据预处理</h1>
			<pre>
				treeEx4 = new $.Tree({
					parent: parent,	//父节点
					source: treeData,	//树结构数据
					selectMode: "checkbox&single",	//选择模式.
					pretreatment: function (node) {	//预处理函数，每个节点生成前都会调用此函数，并把节点原始JSON数据转成的对象传进函数.
						//因为这里传来的是一个数据对象引用，为了不破坏原有对象所以返回一个新对象，如果没有return，则默认用原始数据.
						return {
							id: "dataId" + node.id,	//把"id"转换为"dataId_id"
							content: "&lt;span class='tree-content'&gt;-- " + node.content + " --&lt;/span&gt;",	//给内容外边加上一个span
							children: node.children
						};
					}
				});
			</pre>
			<div>
				<button onclick="treeEx4.insert(newData);">插入新节点</button>
				<button onclick="treeEx4.append(newData);">添加新节点</button>
				<button onclick="treeEx4.appendChild(newData);">追加子节点</button>
				<button onclick="treeEx4.insertChild(newData);">插入子节点</button>
				<button onclick="treeEx4.appendToRoot(newData);">追加祖先节点</button>
				<button onclick="treeEx4.insertToRoot(newData);">插入祖先节点</button>
				<button onclick="treeEx4.moveUp();">节点上移</button>
				<button onclick="treeEx4.moveDown();">节点下移</button>
				<button onclick="treeEx4.del();">删除节点</button>
				<button onclick="alert(treeEx4.getSelectedList() + ';\ncount: ' + treeEx4.getSelectedList().length);">取得选中列表</button>
			</div>
			<div id="treeEx4" class="tree-ex">
				加载中...
			</div>
		</div>
		<div class="demo">
			<h1>5.将原始数据附着在节点上</h1>
			<pre>
				treeEx5 = new $.Tree({
					parent: parent,
					source: treeData,
					selectMode: "single",
					sourceQuote: true,	//设置将元数据附着在节点上
					pretreatment: function (node) {
						return {
							id: node.id,
							content: "&lt;span class='tree-content'&gt;-- " + node.content + " -- 点击查看原始json数据&lt;/span&gt;",	//给内容外边加上一个span
							children: node.children
						};
					}, 
					onSelect: function (node) {	//当节点选择的时候调用的函数，会把节点内容当做参数传入。
						var source = $(node).data("source");	//这里必须用jquery取到。取得名称为'source'的数据.
						alert(source.id + " - " + source.content);
					}
				});
			</pre>
			<div>
				<button onclick="alert($(treeEx5.getSelectedContent()).data('source').content);" class="highlight">获取元数据</button>
				<button onclick="treeEx5.insert(newData);">插入新节点</button>
				<button onclick="treeEx5.append(newData);">添加新节点</button>
				<button onclick="treeEx5.appendChild(newData);">追加子节点</button>
				<button onclick="treeEx5.insertChild(newData);">插入子节点</button>
				<button onclick="treeEx5.appendToRoot(newData);">追加祖先节点</button>
				<button onclick="treeEx5.insertToRoot(newData);">插入祖先节点</button>
				<button onclick="treeEx5.moveUp();">节点上移</button>
				<button onclick="treeEx5.moveDown();">节点下移</button>
				<button onclick="treeEx5.del();">删除节点</button>
			</div>
			<div id="treeEx5" class="tree-ex">
				加载中...
			</div>
		</div>
		<div class="demo">
			<h1>6.异步加载</h1>
			<pre>
				treeEx6 = new $.Tree({
					parent: parent,
					source: treeData,
					selectMode: "single",
					pretreatment: function (node) {
						node.content = node.remoteChildren ? ( node.content + "&lt;font color='#ACA899'&gt;" + "(远程获取子节点)" + "&lt;/font&gt;" ) : node.content;
						return node;
					}, 
					remoteChildren: {	//默认远程加载设置(除paramTemplate项外，其他与jquery的$.ajax内选项一致),设置之后,节点如有"remoteChildren"属性则进行远程加载处理.
						paramTemplate: "version=#1.2&id=id",	//请求的参数模板,字面量前面加"#",如:id=#128.会被替换为id=128.还可以获取本节点的数据作为参数,例如id=id,这时不需要加"#",id会被替换为节点的id属性的值例如id=2.
						url: "data/node.json"
					}
				});
			</pre>
			<div>
				<button onclick="treeEx6.insert(newData);">插入新节点</button>
				<button onclick="treeEx6.append(newData);">添加新节点</button>
				<button onclick="treeEx6.appendChild(newData);">追加子节点</button>
				<button onclick="treeEx6.insertChild(newData);">插入子节点</button>
				<button onclick="treeEx6.appendToRoot(newData);">追加祖先节点</button>
				<button onclick="treeEx6.insertToRoot(newData);">插入祖先节点</button>
				<button onclick="treeEx6.moveUp();">节点上移</button>
				<button onclick="treeEx6.moveDown();">节点下移</button>
				<button onclick="treeEx6.del();">删除节点</button>
			</div>
			<div id="treeEx6" class="tree-ex">
				加载中...
			</div>
		</div>
		<div class="demo">
			<h1>7.拖拽排序(需要jquery-ui-sortable支持)</h1>
			<pre>
				treeEx7 = new $.Tree({
							parent: parent,
							source: data,
							selectMode: "single",
							sortable: true,	//设置为可拖动排序的,需要jquery-ui-sortable支持.
							sortover: function (nodeContent, prevNodeContent) {
								
							}
						});
			</pre>
			<div>
			</div>
			<div id="treeEx7" class="tree-ex">
				加载中...
			</div>
		</div>
		<div class="demo">
			<h1>8.节点事件监听器绑定</h1>
			<pre>
				treeEx8 = new $.Tree({
							parent: parent,
							source: data,
							selectMode: "single",
							nodeEvents: {	//节点的事件，支持所有dom事件（去掉事件名称前边的on）。并支持:childrenOpen,childrenClose,checkChanged事件
								"dblclick": function (event, node) {	//第一个参数传递dom event，第二个为节点元数据
									alert("双击");
								}
							}
						});
			</pre>
			<div>
			</div>
			<div id="treeEx8" class="tree-ex">
				加载中...
			</div>
		</div>
		<div class="demo">
			<h1>9.事件触发句柄</h1>
			<pre>
				treeEx8 = new $.Tree({
							parent: parent,
							source: data,
							selectMode: "single",
							eventTrigger: "span.content",	//设置事件触发句柄，这是一个选择器表达式。
							pretreatment: function (nodeData) {
								//作为示例，这里给每个节点加上图标，为了不让图标被选中，需要用到eventTrigger属性.
								var classes = ["tree-ico"];
								switch(nodeData.type)
								{
									case "pic":
										classes.push("tree-ico-pic");
										break;
									case "car":
										classes.push("tree-ico-car");
										break;
									case "channel":
										classes.push("tree-ico-channel");
										break;
									case "url":
										classes.push("tree-ico-url");
										break;
									case "account":
										classes.push("tree-ico-account");
										break;
									case "movie":
										classes.push("tree-ico-movie");
										break;
									case "cellphone":
										classes.push("tree-ico-cellphone");
										break;
									case "email":
										classes.push("tree-ico-email");
										break;
									default:
										classes = [];
								}
								nodeData.content = "&lt;span class='" + classes.join(" ") + "'&gt;&lt;/span&gt;&lt;span class='content'&gt;" + nodeData.content + "&lt;/span&gt;"
							},
							nodeEvents: {	//添加一个事件监听器
								"dblclick": function (event, node) {
									alert("dblclick!");
								}
							}
						});
			</pre>
			<div>
			</div>
			<div id="treeEx9" class="tree-ex">
				加载中...
			</div>
		</div>
		<div class="demo">
			<h1>JSON结构</h1>
			<pre>
				var treeData = [
						{
							id: 1,	//节点id
							content: "中国", //内容
							children: [	//子节点
								{
									id: 1,
									content: "北京"
								}
							],
							remoteChildren: true, //此节点为远程节点,使用默认remoteChildren设置(模式1)
							remoteChildren: {	//此节点为远程节点,使用本节点定义的设置(模式2)
								paramTemplate: "year=#1984&id=id",
								url: "data/node.json"
							} 
						}
					];
				其实此结构只须为可遍历的,其余属性并不是只可有这几个，名称也不是强制的，因为可以在pretreatment这个回调方法里处理任何结构的数据.
				本文档的所使用的演示数据,均在根目录的data文件夹下.
			</pre>
		</div>
		<div class="demo">
			<h1>文件依赖</h1>
			<pre>
				必须:jQuery
				可选:
					拖动排序:jQuery-ui-sortable
			</pre>
		</div>
	</body>
</html>